<!DOCTYPE html>  
<html lang="zh-CN">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>产品月销量表格</title>  
    <style>  
        table {  
            width: 60%;  
            border-collapse: collapse;  
            margin: 20px 0;  
            font-size: 18px;  
            text-align: center;    
        }  
        caption {  
            caption-side: top; 
            font-size: 30px;   
            font-weight: bold; 
            margin-bottom: 20px; 
        }  
        th, td {  
            padding: 12px;  
            border: 3px solid pink;
            text-align: center; 
        }  
        
        .total {  
            font-weight: bold;  
            background-color:  #cfe2ff; 
        }  
       
    </style>  
</head>  
<body>  
<table> 
    <caption>产品月销量</caption>  
    <thead>  
        <tr>  
            <th>ID</th>  
            <th>产品名称</th>  
            <th>销量</th>  
        </tr>  
    </thead>  
    <tbody>  
        <tr>  
            <td>2021090921</td>  
            <td>马克杯</td>  
            <td>5000</td>  
        </tr>  
        <tr>  
            <td>2021090921</td>  
            <td>啤酒杯</td>  
            <td>5200</td>  
        </tr>  
        <tr>  
            <td>2021090921</td>  
            <td>搪瓷杯</td>  
            <td>3500</td>  
        </tr>  
        <tr class="total">  
            <td colspan="2">合计</td>  
            <td>13700</td>  
        </tr>  
    </tbody>  
</table>  
  
</body>  
</html>